<template>
  <view class="solid-bottom">
    <view class="cu-custom" :style="{ height: data.CustomBar + 'px' }">
      <view
        class="cu-bar fixed"
        :style="style"
        :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]"
      >
        <view v-if="isBack" class="action" @tap="BackPage">
          <text class="cuIcon-back"></text>
          <slot name="backText"></slot>
        </view>
        <view class="content" :style="{ top: data.StatusBar + 'px' }">
          <slot name="content"></slot>
        </view>
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { inject, computed, reactive } from "vue";
const global: object = inject("global");
const data = reactive({
  StatusBar: "",
  CustomBar: "",
});
const props = defineProps<{
  bgColor?: string;
  isBack?: [boolean, string] | false;
  bgImage?: string;
}>();
const style = computed<string>(() => {
  let StatusBar = data.StatusBar;
  let CustomBar = data.CustomBar;
  let bgImage = props.bgImage;
  let style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
  if (bgImage) {
    style = `${style}background-image:url(${bgImage});`;
  }
  console.log("stlye", style);
  return style;
});
data.StatusBar = global.StatusBar;
data.CustomBar = global.CustomBar;

function BackPage() {
  if (getCurrentPages().length < 2 && "undefined" !== typeof __wxConfig) {
    let url = "/" + __wxConfig.pages[0];
    return uni.redirectTo({ url });
  }
  uni.navigateBack({
    delta: 1,
  });
}
</script>

<style></style>
